<template>
  <div class="form-example-container">
    <div class="page-header">
      <h2>表单示例</h2>
      <p>本页面展示了各种表单元素的使用方法和验证规则</p>
    </div>

    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <h3>基础表单</h3>
          <el-tag type="success">表单验证</el-tag>
        </div>
      </template>
      
      <el-form 
        :model="formData" 
        :rules="formRules" 
        ref="formRef" 
        label-width="100px"
        label-position="right"
        status-icon
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="formData.username" 
                placeholder="请输入用户名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="formData.password" 
                type="password" 
                placeholder="请输入密码" 
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number 
                v-model="formData.age" 
                :min="1" 
                :max="120" 
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="formData.birthday"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
                <el-radio label="other">其他</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="爱好" prop="hobbies">
              <el-checkbox-group v-model="formData.hobbies">
                <el-checkbox label="reading">阅读</el-checkbox>
                <el-checkbox label="sports">运动</el-checkbox>
                <el-checkbox label="music">音乐</el-checkbox>
                <el-checkbox label="travel">旅行</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职业" prop="occupation">
              <el-select
                v-model="formData.occupation"
                placeholder="请选择职业"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in occupationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select
                v-model="formData.education"
                placeholder="请选择学历"
                style="width: 100%"
              >
                <el-option-group
                  v-for="group in educationOptions"
                  :key="group.label"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="住址" prop="address">
          <el-cascader
            v-model="formData.address"
            :options="addressOptions"
            placeholder="请选择住址"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="个人介绍" prop="introduction">
          <el-input
            v-model="formData.introduction"
            type="textarea"
            :rows="4"
            placeholder="请输入个人介绍"
          />
        </el-form-item>

        <el-form-item label="是否公开" prop="isPublic">
          <el-switch
            v-model="formData.isPublic"
            active-text="公开"
            inactive-text="私密"
          />
        </el-form-item>

        <el-form-item label="评分" prop="rate">
          <el-rate
            v-model="formData.rate"
            :colors="rateColors"
            show-score
          />
        </el-form-item>

        <el-form-item label="紧急程度" prop="urgency">
          <el-slider
            v-model="formData.urgency"
            :step="10"
            show-stops
            :marks="urgencyMarks"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  age: 18,
  birthday: '',
  gender: 'male',
  hobbies: [],
  occupation: '',
  education: '',
  address: [],
  introduction: '',
  isPublic: false,
  rate: 0,
  urgency: 0
})

// 表单验证规则
const formRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, message: '密码必须包含大小写字母和数字', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 1, max: 120, message: '年龄必须在 1 到 120 之间', trigger: 'blur' }
  ],
  birthday: [
    { required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  hobbies: [
    { type: 'array', min: 1, message: '请至少选择一个爱好', trigger: 'change' }
  ],
  occupation: [
    { required: true, message: '请选择职业', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请选择学历', trigger: 'change' }
  ],
  address: [
    { type: 'array', required: true, message: '请选择住址', trigger: 'change' }
  ],
  introduction: [
    { required: true, message: '请输入个人介绍', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
})

// 职业选项
const occupationOptions = [
  { value: 'developer', label: '开发工程师' },
  { value: 'designer', label: '设计师' },
  { value: 'product', label: '产品经理' },
  { value: 'manager', label: '项目经理' },
  { value: 'marketing', label: '市场营销' },
  { value: 'sales', label: '销售' },
  { value: 'other', label: '其他' }
]

// 学历选项
const educationOptions = [
  {
    label: '本科及以下',
    options: [
      { value: 'high_school', label: '高中' },
      { value: 'junior_college', label: '专科' },
      { value: 'bachelor', label: '本科' }
    ]
  },
  {
    label: '研究生及以上',
    options: [
      { value: 'master', label: '硕士' },
      { value: 'doctor', label: '博士' },
      { value: 'postdoc', label: '博士后' }
    ]
  }
]

// 住址选项
const addressOptions = [
  {
    value: 'beijing',
    label: '北京',
    children: [
      {
        value: 'haidian',
        label: '海淀区',
        children: [
          { value: 'zhongguancun', label: '中关村' },
          { value: 'wudaokou', label: '五道口' }
        ]
      },
      {
        value: 'chaoyang',
        label: '朝阳区',
        children: [
          { value: 'guomao', label: '国贸' },
          { value: 'sanlitun', label: '三里屯' }
        ]
      }
    ]
  },
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'pudong',
        label: '浦东新区',
        children: [
          { value: 'lujiazui', label: '陆家嘴' },
          { value: 'zhangjiang', label: '张江' }
        ]
      },
      {
        value: 'xuhui',
        label: '徐汇区',
        children: [
          { value: 'xujiahui', label: '徐家汇' },
          { value: 'huadong', label: '华东理工' }
        ]
      }
    ]
  }
]

// 评分颜色
const rateColors = ['#99A9BF', '#F7BA2A', '#FF9900']

// 紧急程度标记
const urgencyMarks = {
  0: '低',
  50: '中',
  100: '高'
}

// 提交表单
const submitForm = () => {
  if (!formRef.value) return
  
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('表单验证通过，提交数据：' + JSON.stringify(formData))
      console.log('表单数据', formData)
    } else {
      ElMessage.error('表单验证失败，请检查填写内容')
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  ElMessage.info('表单已重置')
}
</script>

<style scoped>
.form-example-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 14px;
}

.form-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}
</style> 